<template>
  <a-layout-sider width="200" style="background: #fff">
    <a-menu
        v-model:selectedKeys="selectedKeys"
        :openKeys="['batch', 'base', 'business', 'member']"
        mode="inline"
        :style="{ height: '100%', borderRight: 0 }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <coffee-outlined /> &nbsp; 欢迎
        </router-link>
      </a-menu-item>
      <a-menu-item key="/about">
        <router-link to="/about">
          <user-outlined /> &nbsp; 关于
        </router-link>
      </a-menu-item>

      <a-sub-menu key="member">
        <template #title>
          <span>
            <UnorderedListOutlined />
            会员管理
          </span>
        </template>
        <a-menu-item key="/member/ticket">
          <router-link to="/member/ticket">
<!--            <MenuUnfoldOutlined /> &nbsp; 会员车票-->
            <user-outlined /> &nbsp; 会员车票
          </router-link>
        </a-menu-item>
      </a-sub-menu>


      <a-sub-menu key="business">
        <template #title>
          <span>
            <UnorderedListOutlined />
            业务管理
          </span>
        </template>

        <a-menu-item key="/business/confirmOrder">
          <router-link to="/business/confirmOrder">
            <user-outlined /> &nbsp; 订单信息
          </router-link>
        </a-menu-item>

        <a-menu-item key="/business/dailyTrainTicket">
          <router-link to="/business/dailyTrainTicket">
            <user-outlined /> &nbsp; 余票管理
          </router-link>
        </a-menu-item>

        <a-menu-item key="/business/dailyTrain">
          <router-link to="/business/dailyTrain">
            <user-outlined /> &nbsp; 每日火车
          </router-link>
        </a-menu-item>

        <a-menu-item key="/business/dailyTrainStation">
          <router-link to="/business/dailyTrainStation">
            <user-outlined /> &nbsp; 火车站点
          </router-link>
        </a-menu-item>

        <a-menu-item key="/business/dailyTrainCarriage">
          <router-link to="/business/dailyTrainCarriage">
            <user-outlined /> &nbsp; 火车车厢
          </router-link>
        </a-menu-item>

        <a-menu-item key="/business/dailyTrainSeat">
          <router-link to="/business/dailyTrainSeat">
            <user-outlined /> &nbsp; 火车座位
          </router-link>
        </a-menu-item>

      </a-sub-menu>

      <a-sub-menu key="batch">
        <template #title>
          <span>
            <UnorderedListOutlined />
            跑批管理
          </span>
        </template>
        <a-menu-item key="/batch/job">
          <router-link to="/batch/job">
            <user-outlined /> &nbsp; 任务管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>

      <a-sub-menu key="base">
        <template #title>
          <span>
            <UnorderedListOutlined />
            基础数据
          </span>
        </template>
        <a-menu-item key="/base/station">
          <router-link to="/base/station">
            <user-outlined /> &nbsp; 车站管理
          </router-link>
        </a-menu-item>

        <a-menu-item key="/base/train">
          <router-link to="/base/train">
            <user-outlined /> &nbsp; 火车管理
          </router-link>
        </a-menu-item>

        <a-menu-item key="/base/trainStation">
          <router-link to="/base/trainStation">
            <user-outlined /> &nbsp; 火车站点
          </router-link>
        </a-menu-item>

        <a-menu-item key="/base/trainCarriage">
          <router-link to="/base/trainCarriage">
            <user-outlined /> &nbsp; 火车车厢
          </router-link>
        </a-menu-item>

        <a-menu-item key="/base/trainSeat">
          <router-link to="/base/trainSeat">
            <user-outlined /> &nbsp; 火车座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>

    </a-menu>
  </a-layout-sider>
</template>

<script>
import {defineComponent, ref, watch} from 'vue';
import router from "@/router";

export default defineComponent({
  name:"TheSiderView",
  setup() {

    const selectedKeys = ref([]);

    watch(() => router.currentRoute.value.path, (newValue) => {
      console.log('watch',newValue);
      selectedKeys.value = [];
      selectedKeys.value.push(newValue);
    }, {immediate: true});

    return {
      selectedKeys,
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
